Progressive Web App Deep Linking: URL-basierte Wiederherstellung des Anwendungszustands

Progressive Web Apps (PWAs) haben die Art und Weise, wie wir Webanwendungen erleben, revolutioniert. Sie kombinieren die besten Funktionen nativer Apps mit der Zugänglichkeit des Webs und bieten Offline-Fähigkeiten, Push-Benachrichtigungen und ein nahtloses Nutzererlebnis. Ein entscheidender Aspekt zur Verbesserung des PWA-Nutzererlebnisses ist die Implementierung von Deep Linking mit effektiver Zustandswiederherstellung.

Was ist Deep Linking?

Deep Linking ist die Fähigkeit, eine URL zu verwenden, um Benutzer zu einem bestimmten Ort oder Inhalt innerhalb einer mobilen App oder PWA zu leiten. Anstatt nur den Startbildschirm der App zu öffnen, kann ein Deep Link den Benutzer direkt zu einer Produktseite, einem Einstellungsbildschirm oder jedem anderen spezifischen Inhalt führen. Im Kontext von PWAs bedeutet Deep Linking, dass eine URL nicht nur die PWA startet, sondern auch den Zustand der Anwendung wiederherstellt, um dem erwarteten Kontext des Benutzers zu entsprechen.

Warum ist Deep Linking für PWAs wichtig?

Deep Linking ist aus mehreren Gründen unerlässlich:

• Verbessertes Nutzererlebnis: Benutzer können sofort auf bestimmte Inhalte zugreifen, ohne durch die gesamte Anwendung navigieren zu müssen. Dies ist in der heutigen schnelllebigen digitalen Welt, in der Benutzer sofortige Befriedigung erwarten, von entscheidender Bedeutung.
• Gesteigertes Engagement: Deep Links in Marketingkampagnen, Social-Media-Posts oder E-Mail-Newslettern können Benutzer direkt zu relevanten Inhalten innerhalb der PWA führen, was das Engagement und die Konversionen erhöht.
• Nahtloses Teilen: Benutzer können spezifische Inhalte innerhalb der PWA einfach über eine URL mit anderen teilen. Der Empfänger kann dann direkt auf denselben Inhalt in seiner PWA-Instanz zugreifen.
• SEO-Vorteile: PWAs werden von Suchmaschinen indiziert, und Deep Links ermöglichen es Suchmaschinen, spezifische Inhalte innerhalb der App zu crawlen und zu indizieren, was die Sichtbarkeit und die Suchmaschinen-Rankings verbessert.
• Erhaltung des Anwendungszustands: Korrekt implementiertes Deep Linking kann den Zustand der Anwendung bewahren und sicherstellen, dass das Nutzererlebnis auch dann konsistent bleibt, wenn die App geschlossen und über einen Deep Link wieder geöffnet wird. Dies ist für komplexe Anwendungen oder Arbeitsabläufe von größter Bedeutung.

Den Anwendungszustand und dessen Wiederherstellung verstehen

Der Anwendungszustand (App State) bezieht sich auf die Daten, die den aktuellen Zustand Ihrer PWA definieren. Dies kann Folgendes umfassen:

• Die aktuell angezeigte Seite oder Ansicht.
• Der Inhalt eines Warenkorbs.
• Benutzereingaben in einem Formular.
• Die Scroll-Position auf einer Seite.
• Der Authentifizierungsstatus.

Die Wiederherstellung des Anwendungszustands bedeutet, dass die Anwendung, wenn ein Benutzer die PWA über einen Deep Link öffnet, genau in den Zustand zurückversetzt wird, in dem sie sich befand, als der Link erstellt wurde. Dies ist entscheidend für ein reibungsloses und intuitives Nutzererlebnis. Stellen Sie sich vor, ein Benutzer füllt ein langes Formular aus; wenn er die App schließt und ohne ordnungsgemäße Zustandswiederherstellung wieder öffnet, müsste er von vorne anfangen. Deep Linking mit Wiederherstellung des Anwendungszustands löst dieses Problem.

Wie man PWA Deep Linking mit Wiederherstellung des Anwendungszustands implementiert

Die Implementierung von Deep Linking mit Wiederherstellung des Anwendungszustands umfasst mehrere Schritte:

1. Definieren Sie Ihre URL-Struktur

Eine gut definierte URL-Struktur ist entscheidend für effektives Deep Linking. Überlegen Sie, wie die Inhalte und Funktionen Ihrer App auf bestimmte URLs abgebildet werden. Verwenden Sie eine konsistente und logische Struktur, die leicht zu verstehen und zu warten ist.

Beispiel:

Betrachten wir eine E-Commerce-PWA. Ihre URL-Struktur könnte so aussehen:

• / (Startseite)
• /products (Liste aller Produkte)
• /products/<product-id> (Spezifische Produktseite, z.B. /products/123)
• /cart (Warenkorb)
• /checkout (Bezahlvorgang)
• /profile (Benutzerprofil)

Für eine komplexere Zustandsverwaltung können Sie Query-Parameter verwenden:

• /products?category=electronics (Liste der Produkte in der Kategorie „Elektronik“)
• /search?q=keyword (Suchergebnisse für „keyword“)

2. Eingehende URLs verarbeiten

Ihre PWA muss in der Lage sein, eingehende URLs zu verarbeiten und die notwendigen Informationen zu extrahieren, um den App-Zustand wiederherzustellen. Dies beinhaltet typischerweise die Verwendung von JavaScript, um die URL zu parsen und den Zustand der Anwendung entsprechend zu aktualisieren. Der primäre Ort zur Verarbeitung eingehender URLs befindet sich in der Hauptanwendungslogik oder dem Router Ihrer PWA.

Beispiel mit JavaScript:

            
function handleDeepLink() {
  const url = new URL(window.location.href);
  const path = url.pathname;

  switch (path) {
    case '/products':
      // Zeigt die Liste der Produkte an
      displayProducts();
      break;
    case '/cart':
      // Zeigt den Warenkorb an
      displayCart();
      break;
    default:
      if (path.startsWith('/products/')) {
        const productId = path.split('/').pop();
        // Zeigt die Details des angegebenen Produkts an
        displayProductDetails(productId);
      } else {
        // Zeigt die Startseite an
        displayHomePage();
      }
  }

  // Query-Parameter verarbeiten
  const category = url.searchParams.get('category');
  if (category) {
    // Produkte nach Kategorie filtern
    filterProductsByCategory(category);
  }

  const searchQuery = url.searchParams.get('q');
  if (searchQuery) {
    // Eine Suche durchführen
    performSearch(searchQuery);
  }
}

// handleDeepLink aufrufen, wenn die App geladen wird
handleDeepLink();

// Auf Änderungen der URL lauschen (mit der History API)
window.addEventListener('popstate', handleDeepLink);

            

              
                Copy
              
            
          

Dieses Beispiel zeigt, wie die URL geparst und der Zustand der App basierend auf dem Pfad und den Query-Parametern aktualisiert wird. Die Funktion handleDeepLink wird aufgerufen, wenn die App geladen wird und immer dann, wenn sich die URL ändert (aufgrund der Navigation innerhalb der App). Beachten Sie die Verwendung des `popstate`-Event-Listeners. Dies ist unerlässlich für die Handhabung der Vor-/Zurück-Navigation des Browsers innerhalb Ihrer PWA.

3. Anwendungszustand speichern und wiederherstellen

Um den Anwendungszustand effektiv wiederherzustellen, benötigen Sie einen Mechanismus, um die notwendigen Daten zu speichern und abzurufen, wenn die App über einen Deep Link erneut geöffnet wird. Hierfür können verschiedene Methoden verwendet werden, jede mit ihren eigenen Vor- und Nachteilen.

Local Storage

Local Storage ist eine einfache und bequeme Möglichkeit, kleine Datenmengen im Browser des Benutzers zu speichern. Er ist ideal zum Speichern von Dingen wie Benutzereinstellungen, Authentifizierungstokens oder dem Inhalt eines kleinen Warenkorbs. Local Storage hat jedoch eine begrenzte Speicherkapazität und sollte nicht für große oder sensible Daten verwendet werden.

Beispiel mit Local Storage:

            
// Die aktuelle Produkt-ID speichern
localStorage.setItem('currentProductId', productId);

// Die Produkt-ID wiederherstellen
const currentProductId = localStorage.getItem('currentProductId');
if (currentProductId) {
  displayProductDetails(currentProductId);
}

            

              
                Copy
              
            
          

Session Storage

Session Storage ähnelt dem Local Storage, aber die Daten werden nur für die Dauer der Benutzersitzung gespeichert. Wenn der Benutzer den Browser-Tab oder das Fenster schließt, werden die Daten automatisch gelöscht. Session Storage eignet sich zum Speichern von temporären Daten, die nicht über mehrere Sitzungen hinweg benötigt werden.

Cookies

Cookies sind kleine Textdateien, die auf dem Computer des Benutzers gespeichert werden. Sie werden oft zur Verfolgung der Benutzeraktivität und zum Speichern von Präferenzen verwendet. Cookies haben jedoch mehrere Einschränkungen, darunter eine geringe Speicherkapazität und potenzielle Datenschutzbedenken. Moderne PWAs bevorzugen oft die Verwendung von Local Storage oder IndexedDB gegenüber Cookies.

IndexedDB

IndexedDB ist eine leistungsfähigere und flexiblere Speicherlösung als Local Storage oder Cookies. Es handelt sich um eine NoSQL-Datenbank, mit der Sie große Mengen strukturierter Daten im Browser des Benutzers speichern können. IndexedDB ist ideal zum Speichern komplexer Anwendungszustände, wie z. B. des Inhalts eines großen Warenkorbs, von Benutzerprofilen oder Offline-Daten.

Beispiel mit IndexedDB:

            
// Eine Datenbank öffnen
const request = indexedDB.open('myDatabase', 1);

request.onerror = function(event) {
  console.error('Fehler beim Öffnen der Datenbank:', event);
};

request.onsuccess = function(event) {
  const db = event.target.result;

  // Die aktuellen Produktdetails speichern
  const transaction = db.transaction(['products'], 'readwrite');
  const objectStore = transaction.objectStore('products');
  const addRequest = objectStore.put({ id: productId, name: productName, price: productPrice });

  addRequest.onsuccess = function(event) {
    console.log('Produkt zur Datenbank hinzugefügt');
  };

  // Die Produktdetails abrufen
  const getRequest = objectStore.get(productId);

  getRequest.onsuccess = function(event) {
    const product = event.target.result;
    if (product) {
      displayProductDetails(product.id, product.name, product.price);
    }
  };
};

request.onupgradeneeded = function(event) {
  const db = event.target.result;
  const objectStore = db.createObjectStore('products', { keyPath: 'id' });
};

            

              
                Copy
              
            
          

Dieses Beispiel zeigt, wie man eine IndexedDB-Datenbank öffnet, Produktdetails speichert und sie später wieder abruft. Das onupgradeneeded-Ereignis wird verwendet, um den Objektspeicher zu erstellen, falls er noch nicht existiert.

Service Worker und Caching

Service Worker können Netzwerkanfragen abfangen und zwischengespeicherte Antworten bereitstellen, sodass Ihre PWA offline oder bei eingeschränkter Konnektivität funktioniert. Sie können auch zum Speichern und Wiederherstellen des App-Zustands verwendet werden. Durch das Caching der notwendigen Daten können Sie sicherstellen, dass die App auch dann funktionsfähig bleibt, wenn der Benutzer offline ist.

4. Verschiedene Szenarien behandeln

Bei der Implementierung von Deep Linking mit Wiederherstellung des Anwendungszustands ist es wichtig, verschiedene Szenarien elegant zu behandeln:

• App ist nicht installiert: Wenn der Benutzer auf einen Deep Link klickt, die PWA aber nicht installiert ist, sollten Sie ihn zur Installationsseite der PWA weiterleiten (z. B. zum App Store oder zur Startseite der PWA mit einer Installationsaufforderung). Erwägen Sie die Verwendung von Deferred Deep Linking (siehe unten).
• App läuft bereits: Wenn die PWA bereits im Hintergrund läuft, sollten Sie sie in den Vordergrund bringen und den App-Zustand wiederherstellen. Dies kann die Verwendung der `clients.matchAll()`-Methode in Ihrem Service Worker erfordern, um die vorhandene PWA-Instanz zu finden.
• Ungültiger oder veralteter Deep Link: Wenn der Deep Link ungültig oder veraltet ist, sollten Sie dem Benutzer eine Fehlermeldung anzeigen und ihn auf eine relevante Seite innerhalb der PWA weiterleiten (z. B. die Startseite oder eine Suchergebnisseite).
• Berechtigungen: PWAs erfordern oft Benutzerberechtigungen (Standort, Kamera, Benachrichtigungen). Behandeln Sie Berechtigungsanfragen elegant und erklären Sie, warum sie für die spezifische Funktionalität im Zusammenhang mit dem Deep Link notwendig sind.

Fortgeschrittene Deep-Linking-Techniken

Über die Grundlagen hinaus gibt es hier einige fortgeschrittene Techniken, um die Deep-Linking-Fähigkeiten Ihrer PWA zu verbessern:

Deferred Deep Linking

Deferred Deep Linking ermöglicht es Ihnen, Benutzer zu verfolgen, die auf einen Deep Link klicken, *bevor* sie die PWA installieren. Wenn der Benutzer die PWA zum ersten Mal installiert und öffnet, können Sie den verzögerten Deep Link abrufen und ihn zum beabsichtigten Inhalt führen. Dies ist besonders nützlich für Marketingkampagnen.

Wie es funktioniert:

1. Der Benutzer klickt auf einen Deep Link (z. B. in einer Anzeige).
2. Wenn die PWA nicht installiert ist, wird er zum App Store oder zur Startseite der PWA weitergeleitet.
3. Ein Tracking-Dienst speichert die Deep-Link-Informationen (z. B. in einem Cookie oder im Local Storage).
4. Wenn der Benutzer die PWA installiert und öffnet, ruft die App die gespeicherten Deep-Link-Informationen ab.
5. Die App navigiert den Benutzer zum beabsichtigten Inhalt.

Mehrere Drittanbieterdienste bieten Lösungen für Deferred Deep Linking an.

Verwendung des Web App Manifests

Das Web App Manifest (manifest.json) stellt dem Browser Informationen über Ihre PWA zur Verfügung, einschließlich ihres Namens, ihrer Symbole und ihrer Start-URL. Sie können die Eigenschaft `start_url` im Manifest verwenden, um die URL anzugeben, die geöffnet werden soll, wenn die PWA vom Startbildschirm aus gestartet wird. Dies kann zur Implementierung grundlegender Deep-Linking-Funktionen verwendet werden.

Beispiel:

            
{
  "name": "Meine PWA",
  "short_name": "PWA",
  "start_url": "/products/123",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/icon.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

            

              
                Copy